

<template>
  <h1>个人信息资料(ref,reactive)</h1>
  <h2>姓名:{{name}}</h2>
  <h2>年龄:{{age}}</h2>
  <h2>爱好:{{aihao}}</h2>
  <button @click="updateAge">修改年龄</button>
  <br />
  <br />
  <button @click="updateAihao">修改爱好</button>
  <hr />
  <Demo msg="你好啊" @hello="helloclick">
    <template v-slot:header>我是头部</template>
    <template v-slot="props">
      <h4>我是内容{{props.msg}}</h4>
    </template>
    <!-- #footer === v-slot:footer -->
    <template #footer>我是底部</template>
  </Demo>
  <hr />
  <ComputedVue />
  <hr />
  <WatchVue />
  <hr />
  <watch-effect-vue />
  <hr />
  <button @click="isLifeCycleVue = !isLifeCycleVue">显示/隐藏</button>
  <LifeCycleVue v-if="isLifeCycleVue" />
  <hr />
  <button @click="isCustomHooksDemoVue = !isCustomHooksDemoVue">显示/隐藏</button>
  <CustomHooksDemoVue v-if="isCustomHooksDemoVue" />
  <hr />
  <DemoToRefToRefsVue />
  <hr />
  <DemoShallowRefShallowReactiveVue />
  <hr />
  <DemoReadonlyShallowReadonlyVue />
  <hr />
  <!-- 
    1.#default === v-slot:default (将 v-slot: 简写为 #)
    2.如果v-slot写在组件上,那么其children就不可在使用 v-slot,反之......
  -->
  <DemoSlot #default="{msg}">
    <h5>{{msg}}</h5>
  </DemoSlot>
  <hr />
  <DemoModelVue v-model="demo_model_value" v-model:title="demo_model_title" />
</template>


<script>
import { ref, reactive } from 'vue'
import Demo from './components/Demo.vue'
import ComputedVue from './components/Computed.vue'
import WatchVue from './components/Watch.vue'
import WatchEffectVue from './components/WatchEffect.vue'
import LifeCycleVue from './components/LifeCycle.vue'
import CustomHooksDemoVue from './components/CustomHooksDemo.vue'
import DemoToRefToRefsVue from './components/Demo-toRef-toRefs.vue'
import DemoShallowRefShallowReactiveVue from './components/Demo-shallowRef-shallowReactive.vue'
import DemoReadonlyShallowReadonlyVue from './components/Demo-readonly-shallowReadonly.vue'
import DemoSlot from './components/Demo_Slot.vue'
import DemoModelVue from './components/Demo-model.vue'
export default {
  name: "App",
  setup () {
    const name = ref('张三')
    let age = ref(18)
    const aihao = reactive(['抽烟', '喝酒', '烫头'])
    let isLifeCycleVue = ref(true)
    let isCustomHooksDemoVue = ref(true)
    let demo_model_value = ref(1)
    let demo_model_title = ref('我是title')
    function updateAge () {
      age.value++
    }
    function updateAihao () {
      aihao[0] = '学习'
    }
    function helloclick (value) {
      console.log(value);
    }
    return {
      name,
      age,
      aihao,
      updateAge,
      updateAihao,
      helloclick,
      isLifeCycleVue,
      isCustomHooksDemoVue,
      demo_model_value,
      demo_model_title
    }
  },
  components: {
    Demo,
    ComputedVue,
    WatchVue,
    WatchEffectVue,
    LifeCycleVue,
    CustomHooksDemoVue,
    DemoToRefToRefsVue,
    DemoShallowRefShallowReactiveVue,
    DemoReadonlyShallowReadonlyVue, DemoSlot, DemoModelVue
  }
}
</script>

<style>
</style>
